import React, { Component } from 'react';
import { connect } from 'dva';
import {Transfer,Button} from 'antd';

class Self extends Component {
  state = {
    mockData: [],
    targetKeys: [],
  }
  componentDidMount() {
    this.getMock();
    const breadcrumbData = {
		breadcrumb: [{
				name: '首页',
				path: '/'
			},
			{
				name: '通用列表',
				path: '/ComList'
			},
			{
				name: '用户权限配置'
			}
		]
	};
	this.props.dispatch({
		type: 'common/changeBreadcrumb',
		payload: breadcrumbData
	})
  }
  getMock = () => {	//生成假数据
    const targetKeys = [];
    const mockData = [];
    for (let i = 0; i < 6; i++) {
      const data = {
        key: i.toString(),
        title: `权限${i + 1}`,
        description: `某某权限${i + 1}`,
        chosen: Math.random() * 2 > 1,
      };
      if (data.chosen) {
        targetKeys.push(data.key);
      }
      mockData.push(data);
    }
    this.setState({ mockData, targetKeys });
  }
  handleChange = (targetKeys) => {
    this.setState({ targetKeys });
  }
  renderFooter = () => {
    return (
      <Button 
      	size="small"
        style={{ float: 'right', margin: 5 }}
        onClick={this.getMock}>
        恢复
      </Button>
    );
  }
  render() {
    return (
      <Transfer
        dataSource={this.state.mockData}
        showSearch
        searchPlaceholder="权限搜索"
        listStyle={{width: 250,height: 300,}}
        operations={['to right', 'to left']}
        targetKeys={this.state.targetKeys}
        onChange={this.handleChange}
        render={item => `${item.title}-${item.description}`}
        footer={this.renderFooter}
      />
    )
  }
}

function mapStateToProps({common}) {
	return {
		common
	};
}
export default connect(mapStateToProps)(Self);
